<template>
  <!-- 评论页面 -->
  <!-- WJ 2023年4月3日 10点00分 -->
  <div class="comment" style="width: 1000px; margin: 10px auto;"  >
    <!-- 商品图片展示信息 -->
    <div id="div-info" style="width:300px; margin:10px auto; border: 1px solid #ccc; padding: 20px;">
      <div style="margin:10px 0,auto">
        商品图片地址
        <!-- <img style="width:240px;" class="divImg" :src="imgSrc + divInfo.imageId" /> -->
      </div>
      <div>商品名称: div手工品</div>
      <div style="margin:10px 0">商品价格:100</div>
    </div>
    <!-- 星级评价模块 -->
    <div style="margin-left: 120px;">
      <span class="demonstration">评价</span>
      <el-rate v-model="comment.rate" show-text :texts = "['极差', '非常失望', '一般般', '非常满意', 'surprise']" :colors="colors"></el-rate>
    </div>
    <!-- 输入评论内容模块 -->
    <div style="margin: 20px 120px ;" >
      <el-row :gutter="20">
        <el-col :span="16"><el-input type="textarea" placeholder="请输入内容..." v-model="comment.content"></el-input></el-col>
        <el-col :span="2"><el-button style="margin:15px 10px" type="primary" @click="submitComment('comment')">提交</el-button></el-col>
      </el-row>
    </div>
    <!-- 评论模块 -->
    <div>
      <!-- 评论展示 -->
      <div style="margin: 20px">
        <div style="margin:10px;font-size: 24px; padding:10px 0;border-bottom: 1px solid #ccc; text-align: left">评论列表</div>
        <div style="margin:20px; text-align: left;" >
          <!-- 遍历评论内容 -->
          <div v-for="item in commentData" :key="item.id" style="margin:20px 0; line-height: 40PX;display: flex;">
            <!-- 用户头像 -->
            <el-avatar :size="40" :src="circleUrl"></el-avatar>
            <!-- 评论模块 -->
            <div style="margin-top: -5px;flex: 1;">
              <div style="margin:-5px 0px 0 10px ; font-size: 15px">{{ item.userName }}</div>
              <div style="margin:-10px 0 0 20px">{{ item.content }}</div>
              <span style="margin:0px 0 0 10px; font-size: 14px;">{{ item.commentTime }}</span>
              <!-- 回复模块 -->
              <div style="margin-top: -10px;margin-left: 10px;">
                <el-button @click="replyDialogWindow(item.userId,item.userName)" type="text" style="margin-bottom: -10px; text-align: left;">回复</el-button>
                <!-- 回复列表 -->
                <div v-for="replyList in item.children" :key="replyList.id">
                  <div v-if="item.children.length" style="margin-left: 100px;background-color: aliceblue; padding: 10px; border-radius: 10px;">
                    <span style="padding:5px 0" @click="replyDialogWindow(replyList.userId,item.userName)">{{ replyList.userName }}</span>
                    <span style="color: cornflowerblue">@{{ replyList.replyUserName}}:</span>
                    <span style="color:#666; margin-left;:10px">{{ replyList.content }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 删除评论模块 -->
            <div style="text-align: right;width: 50px; margin-top: -10px;">
                <el-button type="text" @click="deleteCommentById(item.id)">删除</el-button>
            </div>
          </div>
        </div>
        <!--分页插件 -->
        <div style="padding-top:30px ;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 回复评论对话框 -->
    <el-dialog title="回复" :visible.sync="replyDialogVisible" width="30%">
      <el-form :model="replyCommentForm">
        <el-form-item label="输入内容">
          <el-input v-model="replyCommentForm.content" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="replyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveReply()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 回复表单
      replyCommentForm: {
        // 用户id
        userId: 2,
        // 用户名
        userName: '李四',
        // 商品 id
        divId: 1,
        // 回复对象的id
        replyUserId: 1,
        // 回复对象的用户名
        replyUserName: '',
        // 回复内容
        content: ''
      },
      // 回复评论对话框是否可见
      replyDialogVisible: false,
      // 用户头像地址
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      // 评论列表数组
      commentData: [],
      // 商品地址
      // imgSrc: 'http://127.0.0.1:8088/uploadFile/getImageById?id='
      // 评价分值颜色
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      // 评论信息封装成对象
      comment: {
        // 用户id
        userId: 1,
        // 用户名
        userName: '张三',
        // 商品 id
        divId: 1,
        // 评价分值
        rate: 0,
        // 用户评价内容
        content: ''
      },
      // 分页
      // 总共条数
      total: 0,
      page: {
        // 当前页
        pageNum: 1,
        // 每页条数
        pageSize: 10
      }
    }
  },
  mounted () {
    this.getAllCommentByDivId()
  },
  methods: {
    // 删除评论及回复
    deleteCommentById (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // debugger
        this.$axios.get('/comment/deleteCommentById',{
          params:{
            id : id
          }
        }).then((result) =>{
          if(result.data.flag){
            this.$message({
            type: 'success',
            message: '删除成功!'
            })
          } else {
            this.$message('warning', result.data.obj)
          }
        }).catch((err) => {
            console.log(err)
            this.myMessage('error', '删除失败，请联系管理员')
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      })
    },
    // 保存回复内容
    saveReply () {
      this.$axios.post('/comment/saveReply', this.replyCommentForm).then((result) => {
        if (result.data.flag) {
          this.$message('success', '恭喜您评论成功！')
          // 清空回复框输入内容
          this.replyCommentForm.content = ''
          this.getAllCommentByDivId()
          // 回复对话框关闭
          this.replyDialogVisible = false
        } else {
          this.$message('warning', result.data.obj)
        }
      }).catch((err) => {
        console.log(err)
        this.$message('error', '添加或者修改失败，请联系管理员')
      })
    },
    // 回复评论对话窗口
    replyDialogWindow (userId, userName) {
      // 获取用户id和用户名
      this.id = id
      this.replyCommentForm.replyUserId = userId
      this.replyCommentForm.replyUserName = userName
    },
    // 查询全部用户评论通过商品id
    getAllCommentByDivId () {
      this.$axios.get('/comment/getAllCommentByDivId', {
        params: {
          divId: 1,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }
      }).then((result) => {
        if (result.data.flag) {
          this.commentData = result.data.data.content
          this.total = result.data.data.totalSize
        } else {
          this.$message('warning', result.data.obj)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 发表评论
    submitComment () {
      this.$axios.post('/comment/saveComment', this.comment).then((result) => {
        if (result.data.flag) {
          this.$message('success', '恭喜您评论成功！')
          this.comment = {}
          // 渲染评论列表
          this.getAllCommentByDivId()
        } else {
          this.$message('warning', result.data.obj)
        }
      }).catch((err) => {
        console.log(err)
        this.$message('error', '添加或者修改失败，请联系管理员')
      })
    },
    // 分页
    handleSizeChange (val) {
      // 每页条数
      this.page.pageSize = val
      // 加载新数据
      this.getAllCommentByDivId()
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      // 当前页
      this.page.pageNum = val
      // 加载新数据
      this.getAllCommentByDivId()
      // console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style>
  .el-button{
    font-size:13px;
  }
</style>
